<template>
  <div class="excel-like-page">
    <h1>Excel-like Table Demo</h1>
    <div class="excel-table-container">
      <table class="excel-table">
        <thead>
          <tr>
            <th v-for="(col, colIdx) in columns" :key="colIdx" class="header-cell">
              {{ col }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIdx) in tableData" :key="rowIdx">
            <td
              v-for="(col, colIdx) in columns"
              :key="colIdx"
              class="data-cell"
              @dblclick="startEdit(rowIdx, colIdx)"
            >
              <template v-if="isEditing(rowIdx, colIdx)">
                <input
                  v-model="editValue"
                  ref="editInput"
                  @blur="finishEdit(rowIdx, colIdx)"
                  @keydown.enter="finishEdit(rowIdx, colIdx)"
                  @keydown.esc="cancelEdit"
                  class="cell-input"
                />
              </template>
              <template v-else>
                {{ row[col] }}
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { ref, reactive, nextTick } from 'vue';

export default {
  name: 'ExcelLikeTable',
  setup() {
    const columns = ['A', 'B', 'C', 'D'];
    const tableData = reactive([
      { A: '', B: '', C: '', D: '' },
      { A: '', B: '', C: '', D: '' },
      { A: '', B: '', C: '', D: '' },
      { A: '', B: '', C: '', D: '' }
    ]);

    const editing = ref({ row: null, col: null });
    const editValue = ref('');
    const editInput = ref(null);

    function isEditing(rowIdx, colIdx) {
      return editing.value.row === rowIdx && editing.value.col === colIdx;
    }

    function startEdit(rowIdx, colIdx) {
      editing.value = { row: rowIdx, col: colIdx };
      editValue.value = tableData[rowIdx][columns[colIdx]];
      nextTick(() => {
        if (editInput.value) editInput.value.focus();
      });
    }

    function finishEdit(rowIdx, colIdx) {
      tableData[rowIdx][columns[colIdx]] = editValue.value;
      editing.value = { row: null, col: null };
    }

    function cancelEdit() {
      editing.value = { row: null, col: null };
    }

    return {
      columns,
      tableData,
      editing,
      editValue,
      editInput,
      isEditing,
      startEdit,
      finishEdit,
      cancelEdit
    };
  }
};
</script>

<style scoped>
.excel-like-page {
  padding: 32px;
}
.excel-table-container {
  overflow-x: auto;
}
.excel-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 400px;
}
.excel-table th,
.excel-table td {
  border: 1px solid #dcdcdc;
  padding: 8px;
  min-width: 80px;
  text-align: left;
  background: #fff;
}
.header-cell {
  background: #f5f7fa;
  font-weight: bold;
}
.data-cell {
  cursor: pointer;
  position: relative;
}
.cell-input {
  width: 100%;
  border: none;
  outline: none;
  background: #e6f7ff;
  padding: 6px;
  font-size: 14px;
}
.data-cell:focus-within {
  background: #e6f7ff;
}
</style>